<template>
  <div v-loading="importIng" class="flex-column h-1 flex-1" style="min-height: 400px">
    <!-- 网段基本信息 -->
    <div class="flex flex-wrap">
      <div class="w-50 flex align-center">
        <span class="title-label">{{ $t('SEGMENT_NAME') }}:</span>
        {{ formData.segmentName }}
      </div>
      <div class="w-50">
        <span class="title-label">{{ $t('CABLE_NAME') }}:</span>
        {{ formData.cable ? formData.cable.cableName : '--' }}
      </div>
      <div class="w-50">
        <span class="title-label">{{ $t('A_END_STATION_NAME') }}:</span>
        {{ getRegionName(formData.startStationId) }}
      </div>
      <div class="w-50">
        <span class="title-label">{{ $t('Z_END_STATION_NAME') }}:</span>
        {{ getRegionName(formData.endStationId) }}
      </div>
      <div class="w-50">
        <span class="title-label">{{ $t('ANODE') }}:</span>
        {{ formData.startNode.nodeName }}
      </div>
      <div class="w-50">
        <span class="title-label">{{ $t('ZNODE') }}:</span>
        {{ formData.endNode.nodeName }}
      </div>
    </div>
    <el-table
      ref="channelTable"
      :data="formData.segmentChannelList"
      size="mini"
      min-height="300px"
      height="100%"
      row-key="channelId"
      border
      align="center"
    >
      <template slot="empty">
        <NullData />
      </template>
      <el-table-column type="index" :label="$t('SEQUENCE')" :width="resetSize(60)" />
      <!-- 通道状态 -->
      <el-table-column :label="$t('CHANNEL_STATUS')">
        <template v-slot="scope">
          <el-select
            v-model="scope.row.status"
            size="mini"
            :disabled="
              !scope.row.channelId ||
                type === 'view' ||
                scope.row.status === 'MAIN' ||
                scope.row.status === 'BACKUP'
            "
          >
            <el-option
              v-for="status in scope.row.statusOptions"
              :key="status.value"
              :label="status.label"
              :value="status.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column :label="$t('LINK_LOSS')" width="150" prop="loss">
        <template v-slot="scope">
          {{
            scope.row.linkLoss > 990000
              ? '--'
              : changeDecimal(scope.row.linkLoss, 3)
          }}
        </template>
      </el-table-column>
      <!-- A端节点信息 -->
      <el-table-column :label="formData.startNode.nodeName" :render-header="tableRenderHeader">
        <el-table-column
          v-if="
            formData.startNode.nodeCategory !== 'LIGHT_SPLIT' &&
              formData.startNodeCategory !== 'TRANSPORT'
          "
          :label="$t('A_EEND_PORT')"
          show-overflow-tooltip
        >
          <template v-slot="scope">
            {{ getPortName(aAllPortList, scope.row.startPortId) }}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('Z_EEND_PORT')"
          show-overflow-tooltip
          prop="startPort"
        >
          <template v-slot="scope">
            {{ getPortName(aAllPortList, scope.row.startPortId, 'bizName') }}
          </template>
        </el-table-column>
      </el-table-column>
      <!-- 光缆信息 -->
      <el-table-column
        v-if="formData.cableId"
        :label="formData.cable.cableName"
        :render-header="tableRenderHeader"
      >
        <el-table-column
          :label="$t('FIBER_CORE')"
          show-overflow-tooltip
          prop="fiber"
        >
          <template v-slot="scope">
            {{ scope.row.fiber ? scope.row.fiber.fiberName : '' }}
          </template>
        </el-table-column>
      </el-table-column>
      <!-- Z端节点信息 -->
      <el-table-column :label="formData.endNode.nodeName" :render-header="tableRenderHeader">
        <el-table-column
          :label="$t('A_EEND_PORT')"
          show-overflow-tooltip
          prop="endPort"
        >
          <template v-slot="scope">
            {{ getPortName(zAllPortList, scope.row.endPortId, 'bizName') }}
          </template>
        </el-table-column>
        <el-table-column
          v-if="
            formData.endNodeCategory !== 'LIGHT_SPLIT' && formData.endNodeCategory !== 'TRANSPORT'
          "
          :label="$t('Z_EEND_PORT')"
          show-overflow-tooltip
        >
          <template v-slot="scope">
            {{ getPortName(zAllPortList, scope.row.endPortId) }}
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
    <!--导入引导-->
    <import-boot
      :visible="importVisible"
      @exportClick="exportClick"
      @ImportClick="importClick"
      @import-close="importVisible = false"
    >
      <template #notice>
        <div>
          {{ $t('BEFORE_IMPORTING_PLEASE') }}
          <span class="exportClick" @click="templateExportClick">
            {{ $t('EXPORT_TEMPLATE') }}
          </span>
          {{ $t('EDIT_BEFORE_IMPORT') }}
        </div>
        <div class="font-mini text-danger">
          <i class="el-icon-warning-outline" />
          {{ $t('ONLY_IMPORT_NEW') }}
        </div>
      </template>
    </import-boot>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import nodeApi from '@/api/oen/NodeApi'
  import CableFiberApi from '@/api/oen/CableFiberApi'
  import clusterApi from '@/api/afs/ClusterApi'
  import linkTestPlan from '@/api/oen/LinkTestPlan'
  import { changeDecimal, tableRenderHeader } from '@/utils/common'
  import segmentMixin from '@/mixin/segmentMixin'
  import ImportBoot from '@/components/ImportBoot'

  export default {
    components: { ImportBoot },
    mixins: [segmentMixin],
    props: {
      type: {
        type: String,
        default: ''
      },
      formData: {
        type: Object,
        default: () => {}
      },
      step: {
        type: Number,
        default: 1
      },
      oldChannelList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        showChannelList: false,
        aPortList: [],
        zPortList: [],
        aAllPortList: [],
        zAllPortList: [],
        cableFiberList: [],
        changeDecimal: changeDecimal,
        importVisible: false,
        importIng: false,
        activeList: []
      }
    },
    computed: {
      ...mapGetters(['baseRegionList', 'dictMap', 'getUserId', 'getUser']),
      // 最多添加通道数量
      maxlength() {
        return Math.min(
          this.aPortList.length,
          this.zPortList.length,
          this.formData.cableId ? this.cableFiberList.length : 99999
        )
      },
      channelItem() {
        return {
          // 端口可选的状态
          statusOptions: [
            {
              label: this.$t('CHANNEL_STATUS_IDLE'),
              value: 'IDLE'
            }
          ],
          status: 'IDLE',
          startPortId: '',
          fiberId: '',
          endPortId: '',
          linkLoss: 999999
        }
      }
    },
    mounted() {
    },
    methods: {
      tableRenderHeader(h, data) {
        return tableRenderHeader(h, data)
      },
      refresh() {
        this.getPortList(this.formData.startNodeId, 'a')
        this.getPortList(this.formData.endNodeId, 'z')
        this.getCableFiberList()
        this.$nextTick(() => {
          this.showChannelList = true
        })
      },
      getPortName(allPortList, portId, key = 'connPortName') {
        const portData = allPortList.find(i => i.portId === portId)
        return portData ? portData[key] : '--'
      },
      // 校验网段通道是否有例测任务和任务状态
      async delConfigedChannel(channelData, index) {
        const portData = [channelData.startPortId, channelData.endPortId]
        const res = await linkTestPlan.portTestStatus(portData)
        let msg = ''
        const option = {
          type: 'warning',
          confirmButtonText: this.$t('YES'),
          cancelButtonText: this.$t('CLOSE'),
          showConfirmButton: false
        }
        // 提示优先级1.PROCESS("进行中")；2.READY("准备")；3.PLAN("计划")
        if (portData.some(i => res[i] === 'PROCESS')) {
          msg = this.$t('PROCESS_CAN_NOT_DELETE', { msg: this.$t('CHANNEL') })
        } else if (portData.some(i => res[i] === 'READY')) {
          msg = this.$t('READY_CONFIRM_DELETE', { msg: this.$t('CHANNEL') })
        } else if (portData.some(i => res[i] === 'PLAN')) {
          msg = this.$t('PLAN_CONFIRM_DELETE', { msg: this.$t('CHANNEL') })
        } else {
          this.formData.segmentChannelList.splice(index, 1)
          return
        }
        this.$confirm(msg, option)
          .then(() => {
            this.formData.segmentChannelList.splice(index, 1)
          })
          .catch(() => {})
      },
      // 获取端口列表
      getPortList(nodeId, type) {
        this.showChannelList = false
        let selectedPort = []
        this[`${type}PortList`] = []
        // console.log('this.formData', this.formData)

        // 查看、修改情况需要把已选数据拼接上去
        if (this.type !== 'add') {
          selectedPort = this.formData.segmentChannelList.map(i =>
            type === 'a' ? i.startPortId : i.endPortId
          )
        }
        // AOCC和集群设备端口单独获取
        const nodeSide = type === 'a' ? 'startNode' : 'endNode'
        if (this.formData[nodeSide].nodeType === 'CLUSTER') {
          clusterApi.extPortList({ clusterId: nodeId }).then(res => {
            this.getAfsPort(res, type, selectedPort)
          })
        } else {
          nodeApi
            .portList({
              nodeId: nodeId,
              status: null
            })
            .then(res => {
              this.getAfsPort(res, type, selectedPort)
            })
        }
      },
      // 返回结果格式化
      getAfsPort(res, type, selectedPort) {
        res = res || []
        // 替换国际化标识，和对端端口名称
        res.forEach(i => {
          i.bizName = this.$utils.handleServiceI18n(i.bizName)
          const connPort = res.find(j => j.portId === i.connPortId)
          i.connPortName = connPort ? this.$utils.handleServiceI18n(connPort.bizName) : '--'
        })
        // 光分器只能选择输入
        if (res[0] && res[0].deviceType === 'LIGHT_SPLIT') {
          res = [res[0]]
        }
        this[`${type}AllPortList`] = res
        this[`${type}PortList`] = res.filter(
          i => i.status === 'IDLE' || selectedPort.includes(i.portId)
        )
      },
      // 获取空闲纤芯编号
      getCableFiberList() {
        if (!this.formData.cableId || this.type === 'view') return
        let selectedCable = []
        // 查看、修改情况需要把已选数据拼接上去
        if (this.type !== 'add') {
          selectedCable = this.formData.segmentChannelList.map(i => i.fiber || {})
        }
        this.cableFiberList = [...selectedCable]
        CableFiberApi.idleList({
          cableId: this.formData.cableId
        }).then(res => {
          this.cableFiberList = [
            ...selectedCable.filter(i => !res.some(j => j.fiberId === i.fiberId)),
            ...res
          ]
        })
      },
      // 获取区域/站点/机房
      getRegionName(stationId) {
        const stationData = this.baseRegionList.find(i => i.regionId === stationId)
        return stationData ? stationData.regionName : ''
      }
    }
  }
</script>

<style lang="scss">
  .text-warning {
    font-size: 12px;
    vertical-align: bottom;
  }

  .select-holder {
    padding: 0 5px 0 15px;
    width: 100%;
    height: 28px;
    font-size: 12px;
    text-align: left;
    line-height: 26px;
    // white-space: nowrap;
  white-space: pre;
    overflow: hidden;
    text-overflow: clip;
    border: 1px solid #eee;
    border-radius: 3px;
    cursor: pointer;
    box-sizing: border-box;

    &.disabled {
      cursor: no-drop;
    }

    i {
      width: 25px;
      line-height: 26px;
      color: #c0c4cc;
    }
  }

  #selectDiv {
    position: fixed;
    padding: 0 10px;
    will-change: top, left, width;
    z-index: 2;
  }
</style>
